<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt"    uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="sec"    uri="http://www.springframework.org/security/tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>.::LICI::.</title>
        <link rel="stylesheet" type="text/css" href="css/module.css" media="screen" />
        <script type="text/javascript" src="js/jquery-1.2.2.pack.js"></script>
        <script type="text/javascript" src="js/animatedcollapse.js"></script>
        <script type="text/javascript">
            animatedcollapse.addDiv('success', 'fade=1');
            animatedcollapse.addDiv('failure', 'fade=1');
            animatedcollapse.init();
            
            function setPassword(f) {
                if(f.new_password.value.length < 6) {
                    alert('La clave debe tener al menos 6 caractares.');
                    return false;
                }
                if(f.new_password.value != f.new_password_r.value) {
                    alert('La clave no coincide.');
                    return false;
                }
                return true;
            }
        </script>        
    </head>
    <body>
        <div class="headercontent">
            <table style="width:100%" cellspacing="0" cellpadding="0">
                <tr>
                    <td class="menuHead"><b>Seguridad&nbsp;>&nbsp;</b>Cambiar mi clave</td>
                </tr>
            </table>

            <table id="tabs_menu" cellpadding="0" cellspacing="0" border="0" style="width:100%">
                <tr>
                    <td class="tab_init">&nbsp;</td>
                    <td style="width:20%">
                        <table cellpadding="0" cellspacing="0" border="0" style="width:100%">
                            <td class="tab_current" style="border-right:1px solid #7D909E">Cambiar la clave</td>
                        </table> 
                    </td>
                    <td class="tab_fin">&nbsp;</td>
                </tr>
            </table>     
        </div>
        <div class="maincontent">
            <div id="failure" style="position: absolute; width: 200px; border: 1px solid #FFCC00; padding: 5px; background-color: #FFFFAE; display: none">
                <table>
                    <td><img src="resources/alert.gif" border="0"></td>
                    <td><span style="color: #000000; font-size: 10pt; font-weight: bold">&nbsp;Fallo la solicitud.</span></td>
                </table>   
            </div>

            <div id="success" style="position: absolute; width: 200px; border: 1px solid #009933; padding: 5px; background-color: #DEF5E6; display: none">
                <span style="color: #000000; font-size: 10pt; font-weight: bold">Enviado correctamente.</span>
            </div>            

            <form name="form" action="<c:url value="/changepassword"/>" method="post" onsubmit="return setPassword(this)">
                <table>
                    <tr>
                        <td class="text-label"><label for="old_password">Clave anterior <img src="resources/icons/required.gif"></label></td>
                        <td><input class="text-field" name="old_password" type="password"/></td>
                    </tr>
                    <tr>
                        <td class="text-label"><label for="new_password">Escribe la nueva clave <img src="resources/icons/required.gif"></label></td>
                        <td><input class="text-field"  name="new_password" type="password"/></td>
                    </tr>
                    <tr>
                        <td class="text-label"><label for="new_password_r">Repite la nueva clave <img src="resources/icons/required.gif"></label></td>
                        <td><input class="text-field"  name="new_password_r" type="password"/></td>
                    </tr>              
                </table>
                <p>Si los datos necesarios han sido ingresados correctamente el sistema finalizar&aacute; esta tarea, para seguir presione en <b>Continuar</b></p>
                <input type="hidden" name="usuario" value="<sec:authentication property="principal.username" />"/>
                <input class="button-submit" type="submit" value="Continuar"/>
            </form>
        </div>

        <c:if test="${!empty mensaje}">
            <c:if test="${mensaje == 'true'}">
                <script type="text/javascript">
                    document.getElementById('success').style.display = 'inline';
                    setTimeout('animatedcollapse.hide(\'success\')', 5000);
                </script>  
            </c:if>
            <c:if test="${mensaje == 'false'}">
                <script type="text/javascript">
                    document.getElementById('failure').style.display = 'inline';
                    setTimeout('animatedcollapse.hide(\'failure\')', 5000);
                </script>  
            </c:if>
        </c:if>      

    </body>
</html>
